<html>
<head>
    <title>Timeline demo</title>

    <style type="text/css">
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">

    <script type="text/javascript">
        google.load("visualization", "1");

        var data = undefined;
        var timeline = undefined;

        // Set callback to run when API is loaded
        google.setOnLoadCallback(drawVisualization);

        function onTimeChange(event) {
            document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;

            // adjust the end date of the event in the data table
            var start = data.getValue(0, 0);
            if (event.time > start) {
                data.setValue(0, 1, new Date(event.time));
                var now = new Date();
                if (event.time < now) {
                    data.setValue(0, 2, "Dynamic Event (past)");
                }
                else if (event.time > now) {
                    data.setValue(0, 2, "Dynamic Event (future)");
                }
                else  {
                    data.setValue(0, 2, "Dynamic Event (now)");
                }
                timeline.redraw();
            }
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create and populate a data table.
            data = new google.visualization.DataTable();
            data.addColumn('datetime', 'start');
            data.addColumn('datetime', 'end');
            data.addColumn('string', 'content');
            data.addRows([[
                new Date((new Date()).getTime() - 60 * 1000),
                new Date(),
                'Dynamic event']]);

            // specify options
            var options = {
                'showCustomTime': true
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'), options);

            // Add event listeners
            google.visualization.events.addListener(timeline, 'timechange', onTimeChange);

            // Draw our timeline with the created data and options
            timeline.draw(data);

            // set a custom range from -2 minute to +3 minutes current time
            var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
            var end   = new Date((new Date()).getTime() + 3 * 60 * 1000);
            timeline.setVisibleChartRange(start, end);
        }
    </script>
</head>

<body>
<p style="width: 600px;">
    When the custom time bar is shown, the user can drag this bar to a specific
    time. The Timeline sends an event that the custom time is changed, after
    which the contents of the timeline can be changed according to the specified
    time in past or future.
</p>

<div id="customTime">&nbsp;</div>
<p></p>

<div id="mytimeline"></div>

</body>
</html>
